import React, { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";

import styles from './index.module.scss'

const AtComponent = (props) => {
  const { back, home, title = '导航栏', color, renderCenter, searchBar, backgroundColorTop, extClass, background = '#fff' } = props

  const  defaultProps = {
    extClass: '',
    background: 'rgba(255,255,255,1)', //导航栏背景
    color: '#000000',
    title: '',
    searchText: '点我搜索',
    searchBar: false,
    back: false,
    home: false,
    iconTheme: 'black',
    delta: 1
  };


  const [navigationbarinnerStyle, setNavigationbarinnerStyle] = useState('')
  const [ctnContainer, setCtnContainer] = useState('')

  useEffect(() => {
    const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth, gap } = Taro.globalSystemInfo
    let rightDistanceScope = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
    let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距
    let navbarinnerStyle = [
      `color:${color}`,
      `background:${background}`,
      `height:${navBarHeight + navBarExtendHeight}px`,
      `padding-top:${statusBarHeight}px`,
      `padding-right:${leftWidth}px`,
      `padding-bottom:${navBarExtendHeight}px`
    ].join(';');

    let navLeft = ''

    if ((back && !home) || (!back && home)) {
      navLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:0px`,
        `margin-right:${rightDistanceScope}px`
      ].join(';');
    } else if ((back && home) || title) {
      navLeft = [
        `width:${capsulePosition.width}px`,
        `height:${capsulePosition.height}px`,
        `margin-left:${rightDistanceScope}px`
      ].join(';');
    } else {
      navLeft = [`width:auto`, `margin-left:0px`].join(';');
    }

    setNavigationbarinnerStyle(navbarinnerStyle)
    setCtnContainer([
        `margin-top: ${gap}px`,
        `height: ${capsulePosition.height}px`
      ].join(';'))
    // setSysInfo({ ...  })
  }, [back, background, color, home, title]);

  let nav_bar__center = null;

  if (title) {
    nav_bar__center = <text>{title}</text>;
  } else if (searchBar) {
    // nav_bar__center = (
    //   <View
    //     className='lxy-nav-bar-search'
    //     style={`height:${capsulePosition.height}px;`}
    //   >
    //     <View className='lxy-nav-bar-search__icon' />
    //     <View className='lxy-nav-bar-search__input'>{searchText}</View>
    //   </View>
    // );
  } else {
    /* eslint-disable */
    nav_bar__center = renderCenter;
    /* eslint-enable */
  }

  return (
    <View className={styles.navBar}>
      <View className={`${extClass ? extClass: defaultProps.extClass}`}
        style={navigationbarinnerStyle}
      >
        {/* 和胶囊一行的内容 */}
        <View className={styles.leftCtn} style={ctnContainer}>
          {
            renderCenter? renderCenter : title
          }
        </View>
      </View>
    </View>
  );
}

export default AtComponent;
